import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as homeActions from '../actions/home';
import 'font-awesome/scss/font-awesome.scss';
import '../static/Login.scss';
import { Link } from 'react-router-dom'
import { Toast } from 'antd-mobile';

class Register extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            phone:'',
            password1:'',
            password2:''
        }
    }

    onClick = ()=>{
        if(!(/^1[34578]\d{9}$/.test(this.state.phone))){ 
            Toast.info('请输入正确的手机号码', 2);
            return false;
        } 
        if(this.state.password1 != this.state.password2){
            Toast.info('两次输入的密码不一致', 2);
            return false;
        }
        this.props.actions.register(this.state);
    }

    onChange = (event)=>{
        if(event.target.name == 'phone'){
            this.setState({
                'phone':event.target.value
            })
        }
        if(event.target.name == 'password1'){
            this.setState({
                'password1':event.target.value
            })
        }
        if(event.target.name == 'password2'){
            this.setState({
                'password2':event.target.value
            })
        }
    }

    render() {
        return (
            <div className="login Register">
                <div className="main">
                    <div className="inputT1">
                        <label>
                            <i className="fa fa-user-o" aria-hidden="true"></i>
                            <input type="text" name="phone" onChange={this.onChange} placeholder="请输入手机号码"/>
                        </label>
                    </div>
                    <div className="inputT2">
                        <label>
                            <i className="fa fa-key" aria-hidden="true"></i>
                            <input type="password" name="password1" onChange={this.onChange} placeholder="请输入登录密码"/>
                        </label>
                    </div>
                    <div className="inputT2">
                    <label>
                        <i className="fa fa-key" aria-hidden="true"></i>
                        <input type="password" name="password2" onChange={this.onChange} placeholder="再次输入登录密码"/>
                    </label>
                </div>
                    <div className="loginBtn" onClick={this.onClick}>注册</div>
                    <Link to={'/'}>
                        <div className="loginBtn registerBtn">登录</div>
                    </Link>
                </div>
            </div>
        )
    }
}
const mapStateToProps = (state) => ({
    demo: state.data.demo,
});

const mapDispatchToProps = (dispatch) => {
  return {
    actions:bindActionCreators(homeActions, dispatch)
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Register);